<template>
    <div class="inOneColumn">
        <div class="head">                 
            <span>知识点</span>                
        </div>
        <div class="line" />
        <!-- 最左侧的知识点 -->
        <div class="tree">
            <el-tree
            ref="knowledgepointTree"
            :data="state.categoryData"
            show-checkbox
            :props="defaultProps"
            node-key="id"
            @check="currentChecked"
            >
            </el-tree>
        </div>
    </div>
</template>
  
<script setup>
    import { reactive, ref, toRefs, onMounted, onBeforeUnmount, onBeforeMount, getCurrentInstance } from 'vue'
    import { useStore } from 'vuex'
    import axios from '@/utils/axios'
    import { Delete, Minus, Plus, CloseBold, Link, Select, Right, Back } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    import { useRouter, useRoute } from 'vue-router'



    const router = useRouter()
    let knowledgepointTree=ref(null)
    const defaultProps = {
        label: 'name',
    }
    const props = defineProps({    
        categoryData: Array,
    })
    const store=useStore()
    const state = reactive({
        knowledgepointMenuList: [],
        categoryData: [],
        select_knowledge_id: 0,
        PoolData:[],
})
    // 通过结构，获得appContext变量
    const { appContext } = getCurrentInstance()
    // 获得全局上下文后， 得到$bus事件总线
    const eventBus = appContext.config.globalProperties.$bus
    // 订阅本组件的事件，即清空选中复选框，等待被组件stepTwo触发
    eventBus.on('waitStepTwo',(data_list)=>{
        // console.log("stepTwo传递过来的值：", data_list)
        // knowledgepointTree.value.setCheckedKeys(data_list, false)
    })
    // （发布）触发组件2注册的事件:当本组件的复选框被选中时，触发组件stepTwo注册的事件（把选中的数据复制到知识池中）
    const currentChecked=()=>{
        ElMessage.success('知识点添加成功')
        eventBus.emit("waitKnowledgepointTree", knowledgepointTree.value.getCheckedNodes(false, false))
        knowledgepointTree.value.setCheckedKeys([], false)
    }
  //加载知识点
  onMounted(()=>{
    getCategory()
  })

  //后台获取所有知识点
  const getCategory=()=>{
    axios.get(`/knowledgepoints?size=100`).then(res => {
        if (res.code==200){
            state.categoryData = res.data.results                           
        }else{
            console.log("error", res.message)      
        state.loading = false
        }
    })
    .catch((error)=>{
        console.log("error", error)
    })
  }
</script>

<style scoped>
    .head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    }
    .tree{
        display: flex;
        flex-flow: column nowrap;
        width: 150x;
        overflow: hidden;
        background-color: #fcf2e6;
    }
    .line {
        border-top: 1px solid hsla(0,0%,100%,.05);
        border-bottom: 1px solid rgba(0,0,0,.2);
    }
    span{
        font-size: 10x;
        color: #000;
    }
    .inOneColumn{
        display: flex;
        flex-flow:column nowrap;
        overflow: hidden;
    }
</style>